<template>

  <!-- 头部导航区内容 -->
  <div class="header">
    <img class="header-logo">
    <div class="header-navigation">
      <button class="navigation-ecah" 
      :class="{show:echaIndex==index}" 
      v-for="(item, index) in navigatorData" :key="index"
       @click="$router.push({ path: item.path }), (echaIndex=index)"
       >{{item.name}}</button>
       <button class="back" @click=loginout()>退出登录</button>
    </div>
  </div>
</template>

<script>
import {removeToken } from '@/utils/auth'
export default {
  props: {
    jump: { },
  },

  data () {
    return {
      echaIndex: 0,
      navigatorData: [
        { name: "班级", path: "/goclassrenke" },
        { name: "寄语", path: "/remarksC" },
        { name: "我的", path: "/teachClasses" },
      ],
    }
  },

  mounted() {
    this.echaIndex = this.jump
  },
  methods: {
    async backlogin(){
      const res =  await backlogin()
    },
    loginout(){
      this.$confirm('您确认退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        removeToken()
        this.$router.go(0)
      })
      .catch((err) => err)
    }
  },

  }
</script>

<style>

/* 头部导航区内容 */
.header{
position: relative;
height: 4.75rem;
margin: 1.25rem 26.875rem 1.25rem 26.875rem;
}
.header-logo{
width: 5rem;
height: 3.75rem;
position:absolute;
}

/* 导航区 */
.header-navigation {
position: absolute;
right: 0;
}

/* 标签导航区 */
.navigation-ecah {
font-size: 1.25rem;
border: 0rem solid;
margin: 1.875rem 0rem 0 1.5625rem;
background: #ffffff;
}

.show {
color: #7C0000;
padding-bottom: .3125rem;
border-bottom: .1875rem solid #7C0000;
}
.back{
  margin-left:10rem;
  margin-right:2rem;
  padding:0.5rem 1rem;
  font-size:0.8rem;
  background-color:#7c0000;
  color:#ffffff;
  border:#7C0000;
}



</style>